import { useSnapshot } from 'valtio';
import { type Option } from '../../../../types';
import CommonSelector from '@/components/MiniBpmn/components/CommonSelector';
import UserSelector from '@/components/UserSelector';
import { useState } from 'react';

export interface IView {
  value: Option[];
  options: Option[];
  onChange: (value: Option[]) => void;
}

const User: React.FC<{ service: IView }> = ({
  service,
  ...restProps
}) => {
  const snap = useSnapshot(service);
  const [visible, setVisible] = useState(false);

  return (
    <>
      <CommonSelector
        value={snap.value as Option[]}
        mode="multiple"
        onChange={(val) => { service.onChange(val); }}
        show={()=>{ setVisible(true); }}
      />
      <UserSelector
        visible={visible}
        setVisible={setVisible}
        value={snap.value as Option[]}
        onChange={(val) => { service.onChange(val); }}
        mode="multiple"
      />
    </>
  );
};

export default User;
